<template>
	<div class="page-wrap" data-title="秒杀详情页面">
		<div class="page-inner">
			<div class="section">
				<div class="sec-title">秒杀信息</div>
				<div class="sec-ctx">
					<div class="info-list">
						<div class="info-item">
							<div class="label">商品名称：</div>
							<div class="val">{{ info.title }}</div>
						</div>
						<div class="info-item">
							<div class="label">秒杀开始时间：</div>
							<div class="val">{{ info.startTime }}</div>
						</div>
						<div class="info-item">
							<div class="label">秒杀结束时间：</div>
							<div class="val">{{ info.endTime }}</div>
						</div>
						<div class="info-item">
							<div class="label">促销类型：</div>
							<div class="val">{{ info.accordType == 1 ? '按数量' : info.accordType == 2 ? '按金额' : '秒杀' }}
							</div>
						</div>
						<div class="info-item">
							<div class="label">促销规则：</div>
							<div class="val">{{ info.type == 1 ? '满赠' : info.accordType == 2 ? '满减' : info.accordType ==
								3 ? '满折' : '秒杀' }}</div>
						</div>
					</div>
				</div>
			</div>

			<div class="section">
				<div class="sec-title">商品信息</div>
				<div class="sec-ctx">
					<div class="product-info">
						<div class="table-box">
							<el-table ref="multipleTable" :data="productJson" fit stripe border highlight-current-row
								min-width="100px" style="width: 100%">
								<el-table-column prop="1" label="商品" width="auto">
									<template slot-scope="scope">
										<div class="product-box">
											<div class="table-image-item">
												<el-image style="width: 70px; height: 70px" :src="scope.row.image"
													:preview-src-list="[]">
												</el-image>
											</div>
											<div class="product-title-box">
												<div class="product-title">
													{{ scope.row.inventory.title }}
												</div>
												<!-- <div class="product-guige">
													{{ scope.row.keyVals }}
												</div> -->
											</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="2" label="规格型号" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											{{ scope.row.inventory.keyVals }}
										</div>
									</template>
								</el-table-column>

								<el-table-column prop="2" label="sn" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											{{ scope.row.inventory.sn }}
										</div>
									</template>
								</el-table-column>

								<!-- <el-table-column prop="2" label="市场价" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											{{ scope.row.inventory.priceMarket }}
										</div>
									</template>
								</el-table-column> -->

								<el-table-column prop="2" label="销售单价" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											￥ {{ scope.row.inventory.priceSale }}
										</div>
									</template>
								</el-table-column>

								<el-table-column prop="2" label="秒杀价格" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											￥ {{ scope.row.price }}
										</div>
									</template>
								</el-table-column>

								<el-table-column prop="2" label="数量" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											{{ scope.row.limitNum }}
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="2" label="小计" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											￥ {{ scope.row.price * scope.row.limitNum }}
										</div>
									</template>
								</el-table-column>

								<!-- <el-table-column fixed="right" label="操作" width="50px">
									<template slot-scope="scope">
									</template>
								</el-table-column> -->
							</el-table>
						</div>
					</div>

					<div class="huizong-info">
						<!-- <div class="huizong-item">
							<div class="label">商品总金额:</div>
							<div class="val">¥ {{ goods.price || 0 }}</div>
						</div>
						<div class="huizong-item">
							<div class="label">运费:</div>
							<div class="val">¥ {{ foreignYunfei.price || 0 }}</div>
						</div>
						<div class="huizong-item">
							<div class="label">满减:</div>
							<div class="val">¥ {{ foreignManjian.price || 0 }}</div>
						</div> -->
						<!-- <div class="huizong-item">
							<div class="label">改价:</div>
							<div class="val">¥ {{ info.aaaaaaaaaaaaaaaa }}</div>
						</div> -->
						<!-- <div class="huizong-item">
							<div class="label">运费活动优惠:</div>
							<div class="val">¥ {{info.aaaaaaaaaaaaaaaa}}</div>
						</div> -->
						<!-- <div class="huizong-item">
							<div class="label">营销活动优惠:</div>
							<div class="val">¥ {{info.aaaaaaaaaaaaaaaa}}</div>
						</div> -->
						<!-- <div class="huizong-item">
							<div class="label">优惠券/码:</div>
							<div class="val">¥ {{info.aaaaaaaaaaaaaaaa}}</div>
						</div> -->
						<!-- <div class="huizong-item">
							<div class="label">积分抵扣:</div>
							<div class="val">{{info.aaaaaaaaaaaaaaaa}}积分，¥ {{info.aaaaaaaaaaaaaaaa}}</div>
						</div> -->
						<!-- <div class="huizong-item">
							<div class="label">余额抵扣:</div>
							<div class="val">¥{{info.aaaaaaaaaaaaaaaa}}</div>
						</div> -->
						<!-- <div class="huizong-item">
							<div class="label">第三方应收金额:</div>
							<div class="val">¥{{info.aaaaaaaaaaaaaaaa}}</div>
						</div> -->
						<!-- <div class="huizong-item">
							<div class="label">实付金额:</div>
							<div class="val">¥{{ info.pricePayed || 0 }}</div>
						</div> -->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { SHOP_TYPE } from '@/config/env.js'

import { mapState } from "vuex";
export default {
	name: "miaosha-detail",
	components: {},

	data() {
		return {
			SHOP_TYPE,
			id: this.$route.query.id,
			info: {},
			priceJson: {
				goods: {},
				foreignYunfei: {},
				foreignManjian: {},
			},
			goods: {},
			foreignYunfei: {},
			foreignManjian: {},
			//
			productJson: [],

		};
	},
	computed: {},
	watch: {},
	created() {
		this.setView();
	},
	mounted() { },
	methods: {
		setView() {
			this.$api({
				url: '/admin_service.php',
				method: "get",
				data: {
					action: "yingxiao_getSeckillInfo",
					id: this.id,
				},
			}).then((res) => {
				// console.log(res);
				if (res.code == 200) {
					this.info = res.data;
					this.productJson = res.data.guizes;
					let {
						productJson,
						fanliJson,
						payJson,
						priceJson,
					} = this.info

					// this.productJson = productJson || [];
					this.fanliJson = fanliJson || {};
					this.payJson = payJson || {};
					this.balance = this.payJson.balance || {};
					this.applet = this.payJson.applet || {};
					this.jifen = this.payJson.jifen || {};
					//
					this.priceJson = priceJson || {};
					let {
						goods,
						foreignYunfei,
						foreignManjian
					} = this.priceJson;
					this.goods = goods || {};
					this.foreignYunfei = foreignYunfei || {};
					this.foreignManjian = foreignManjian || {};
				}
			});
		},
	},
};
</script>

<style scoped lang="less">
.page-wrap {
	.page-inner {}
}

.section {
	margin-bottom: 10px;
	background: #fff;
	padding: 20px;
	border-radius: 6px;
}

.sec-title {
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: bold;
}

.sec-ctx {}

.info-list {
	flex-wrap: wrap;
	// display: flex;
	flex-wrap: wrap;

	.info-item {
		margin-bottom: 15px;
		display: flex;

		&+.info-item {
			// margin-left: 20px;
		}
	}
}

// 商品信息
.product-box {
	display: flex;
	align-items: flex-start;

	.table-image-item {}

	.product-title-box {
		padding-left: 10px;

		.product-title {
			margin-bottom: 15px;
		}

		.product-guige {}
	}
}

// 价格汇总
.huizong-info {
	margin-top: 30px;

	.huizong-item {
		margin-bottom: 15px;
		display: flex;
		justify-content: flex-end;
		font-size: 14px;

		.label {
			padding-right: 20px;
		}

		.val {
			min-width: 200px;
		}
	}
}


.xianxia-info {
	margin-top: 20px;
}
</style>